<template>
	<div class="home">
		<!-- 	<div id="nav">
			<router-link to="/recommend">推荐</router-link> |
			<router-link to="/rank">排行</router-link> |
			<router-link to="/search">搜索</router-link>
		</div> -->
		<div class="top_bg"></div>
		<van-tabs class="nav" v-model="tab_act" @change='tab_change'>
			<van-tab name="Recommend" title="推荐音乐"></van-tab>
			<van-tab name="Rank" title="热歌榜"></van-tab>
			<van-tab name="Search" title="搜索"></van-tab>
		</van-tabs>

		<!-- 用于渲染二级路由内容 -->
		<keep-alive>
			<router-view></router-view>
		</keep-alive>


	</div>
</template>



<script>
	// @ is an alias to /src


	export default {
		name: 'Home',
		data() {
			return {
				tab_act: "Recommend",
			}
		},
		components: {},
		methods: {
			tab_change(name, title) {
				console.log(name, title);
				this.$router.push({
					name,
				}).catch(err => err)
			},
		},
		watch: {
			$route:{
				handler(val) {
					let path = ["Recommend","Rank", "Search"];
					if (path.includes(val.name)) {
						this.tab_act = val.name;
					}
				},
				immediate: true,
			},
		}
	}
</script>

<style lang="scss" scoped>
	.van-tabs__line {
		background-color: blue;
	}

	.van-tab--active {
		color: red;
	}

	.top_bg {
		z-index: 999;
		width: 100%;
		background-color: #d43c33;
		height: 84px;
		position: fixed;
		top: 0;
		left: 0;
	}

	.nav {
		height: 40px;
		position: fixed;
		top: 84px;
		left: 0;
		z-index: 999;
		width: 100%;
	}
</style>
